<template>
  <div style="margin-top:-18px">
    <a-card :bordered="false">
      <div v-if="isShow">
        <!-- :rowKey="OrderDataSource => OrderDataSource.key" 故障列表-->

        <a-table
          :columns="columnstableKAITONG"
          :data-source="dataKAITONG"
          bordered
          size="middle"
          rowKey="id"
          style="margin: 20px 10% 0 10%"
          :pagination="false"
        >
          <template slot="file" slot-scope="text, record">
            <SelectFile
              :includeFileName="record.desc"
              :id="record.id"
              @fileListChange="fileListChange"
              @resultChange="resultChange"
            ></SelectFile>
          </template>
          <template slot="action" slot-scope="text, record">
            <UpoadFile
              @resultChange="resultChange"
              :uploadIsOk="record.uploadIsOk"
              :id="record.id"
              :url="record.url"
              :fileList="record.fileList"
              :btninfo="record"
              @btnChange="btnChange"
            ></UpoadFile>
          </template>
          <template slot="template" slot-scope="text, record">
            <a :href="record.downurl" :download="record.downurl">点击下载</a>
          </template>
        </a-table>
        <UploadFileAll
          style="margin: 20px 10% 0 10%;float:right"
          @resultChange="resultChange"
          @btnloading="btnloading"
          :info="dataKAITONG"
        ></UploadFileAll>
        <a-button type="primary" style="width:10%;margin:20px 45%" @click="daoru">查看总报表</a-button>
        <div style="height:1000px"></div>
      </div>
      <!-- //页面总报表 -->
      <div style="margin: 5px 10px" v-else>
        <a-button
          style="margin-bottom:10px;margin-top:18px"
          v-if="tableInfo == 1"
          shape="round"
          type="primary"
          @click="comeBack"
          >返回</a-button
        >
        <br />
        <a-radio-group default-value="a" button-style="solid" style="margin: 0px 0 5px 0px" @change="onChangeRadio">
          <a-radio-button value="a"> 故障清单 </a-radio-button>
          <a-radio-button value="b"> 投诉清单 </a-radio-button>
          <a-radio-button value="c"> 满意度清单 </a-radio-button>
          <a-radio-button value="d"> 企宽清单 </a-radio-button>
        </a-radio-group>
        <br />
        <a-range-picker
          @change="onChangePicker"
          :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]"
          :format="dateFormat"
        />
        <a-button type="primary" icon="search" style="margin:  10px 0 10px 10px" @click="searchFirst">查询</a-button>
        <a-button type="primary" icon="export" style="margin:  10px 0 10px 10px" @click="daochu">excel导出</a-button>
        <!-- 故障清单表格 -->
        <a-table
          @change="pageShow"
          :pagination="pagination"
          v-if="analisyType"
          :loading="firstLoading"
          :columns="columnstableFirst"
          :data-source="dataFirst"
          bordered
          size="middle"
        />
        <!-- 投诉清单表格 -->
        <a-table
          @change="pagetsShow"
          :pagination="pagination"
          v-if="analisyTypea"
          :loading="firstLoading"
          :columns="columnstableFirstNext"
          :data-source="dataFirstNext"
          bordered
          size="middle"
        />
        <!-- 满意度清单表格 -->
        <a-table
          @change="pagemydShow"
          :pagination="pagination"
          v-if="analisyTypeb"
          :loading="firstLoading"
          :columns="columnstableSecond"
          :data-source="dataSecond"
          bordered
          size="middle"
        />
        <!-- 企宽清单表格 -->
        <a-table
          @change="pagemydShow"
          :pagination="false"
          v-if="analisyTypec"
          :loading="firstLoading"
          :columns="columnstableThree"
          :data-source="dataSecond"
          bordered
          size="middle"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import {
  getAnalysisEmos,
  getAnalysisComplain,
  getAnalysisSatisfaction,
  exportExcelComplain,
  exportExcelemos,
  exportExcelSatisfaction
} from '@/api/public'
import { getNowFormatDate } from '@/utils/util.js'
import Vue from 'vue'
import SelectFile from '@/views/systemManage/uploadFile/selectFile'
import UpoadFile from '@/views/systemManage/uploadFile/upoadFile'
import UploadFileAll from '@/views/systemManage/uploadFile/uploadFileAll'
export default {
  name: 'TableList',
  components: {
    SelectFile,
    UpoadFile,
    UploadFileAll
  },
  props: ['tableInfo'],
  data() {
    return {
      qingdanlist: [],
      firstLoading: false,
      secondLoading: false,
      startTime: '',
      endTime: '',
      dateFormat: 'YYYY-MM-DD',
      fileList: '',
      analisyType: true,
      analisyTypea: false,
      analisyTypeb: false,
      analisyTypec: false,
      linshiId: '', //记录修改得某行清单id
      isShow: true,
      readDetailInfo: false, //二级页面（一级详情）
      daochuIs: false,
      columnstableThree,
      headers: {
        // Source: 'gmpcexcelupload', //
        authorization: Vue.ls.get('ACCESS_TOKEN')
      },
      columnstableERJI,

      columnstable,
      columnstableKAITONG, //KT
      columnstableFirst,
      columnstableFirstNext,
      columnstableSecond,
      dataFirst: [],
      dataFirstNext: [],
      dataSecond: [],
      dataKAITONG: [],
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      uidList: [],
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      current: 1,
      pageSize: 10
    }
  },
  filters: {},
  created() {
    this.startTime = getNowFormatDate() + ' 00:00:00'
    this.endTime = getNowFormatDate() + ' 23:59:59'
    this.initdataKAITONG()
  },
  computed: {},
  mounted() {
    if (this.tableInfo == 2) {
      this.isShow = false
      this.getFirstData()
    }
  },
  methods: {
    moment,
    //上传结果按钮状态改变
    btnloading(id) {
      this.dataKAITONG[id].loading = true
    },
    //按钮状态改变
    btnChange(id) {
      this.dataKAITONG[id].loading = true
    },
    //查询
    searchFirst() {
      this.analisyType == true ? this.getFirstData() : ''
      this.analisyTypea == true ? this.getSecondtData() : ''
      this.analisyTypeb == true ? this.getThreeData() : ''
    },
    ////获取故障清单
    getFirstData() {
      this.firstLoading = true
      getAnalysisEmos(this.startTime, this.endTime, this.current, this.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirst = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //故障分页
    pageShow(pagination) {
      this.firstLoading = true
      getAnalysisEmos(this.startTime, this.endTime, pagination.current, pagination.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirst = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },
    ////获取投诉清单
    getSecondtData() {
      this.firstLoading = true
      getAnalysisComplain(this.startTime, this.endTime, this.current, this.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirstNext = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //投诉分页
    pagetsShow(pagination) {
      this.firstLoading = true
      getAnalysisComplain(this.startTime, this.endTime, pagination.current, pagination.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataFirstNext = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //满意度清单
    getThreeData() {
      this.firstLoading = true
      getAnalysisSatisfaction(this.startTime, this.endTime, this.current, this.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataSecond = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //满意度分页
    pagemydShow(pagination) {
      this.firstLoading = true
      getAnalysisSatisfaction(this.startTime, this.endTime, pagination.current, pagination.pageSize)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.dataSecond = response.data.records
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //时间选择
    onChangePicker(date, dateString) {
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
    },
    //导航切换
    onChangeRadio(e) {
      if (e.target.value == 'a') {
        this.analisyType = true
        this.analisyTypea = false
        this.analisyTypeb = false
        this.analisyTypec = false
        this.getFirstData()
      } else if (e.target.value == 'b') {
        this.analisyType = false
        this.analisyTypea = true
        this.analisyTypeb = false
        this.analisyTypec = false
        this.getSecondtData()
      } else if (e.target.value == 'c') {
        this.analisyType = false
        this.analisyTypea = false
        this.analisyTypeb = true
        this.analisyTypec = false
        this.getThreeData()
      } else if (e.target.value == 'd') {
        this.analisyType = false
        this.analisyTypea = false
        this.analisyTypeb = false
        this.analisyTypec = true
        this.dataSecond = []
        // this.getThreeData()
      }
    },

    //故障导出
    downloadGz() {
      let startTime = this.startTime
      let endTime = this.endTime
      exportExcelemos(startTime, endTime)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '故障表格.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    //投诉导出
    downloadTs() {
      let startTime = this.startTime
      let endTime = this.endTime
      exportExcelComplain(startTime, endTime)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '投诉.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    //满意度导出
    downloadMyd() {
      let startTime = this.startTime
      let endTime = this.endTime
      exportExcelSatisfaction(startTime, endTime)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '满意度.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    //上传文件
    fileListChange(fileList, result, id) {
      result == '文件名称错误' ? (this.dataKAITONG[id].uploadIsOk = true) : (this.dataKAITONG[id].uploadIsOk = false)
      this.dataKAITONG[id].fileList = fileList
      this.dataKAITONG[id].status = result
    },
    //删除结果改变
    resultChange(data, id) {
      this.dataKAITONG[id].status = data
      this.dataKAITONG[id].uploadIsOk = true
      this.dataKAITONG[id].fileList = []
      this.dataKAITONG[id].loading = false
    },

    //查看表格清单
    daoru() {
      this.isShow = false
      this.getFirstData()
    },
    //初始化清单列表数据
    initdataKAITONG() {
      this.dataKAITONG = [
        {
          id: 0,
          name: '故障清单',
          url: '/api/import/manage/gz_emos',
          fileList: [],
          status: '未上传',
          desc: '故障清单',
          uploadIsOk: false,
          rule: 'xx故障清单xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 1,
          name: '投诉清单',
          url: '/api/import/manage/gz_complain',
          fileList: [],
          status: '未上传',
          desc: '投诉清单',
          uploadIsOk: false,
          rule: 'xx投诉清单xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 2,
          name: '企宽归档及时清单',
          url: '/api/import/manage/gz_company',
          fileList: [],
          status: '未上传',
          desc: '企宽归档及时',
          uploadIsOk: false,
          rule: 'xx企宽归档及时xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 3,
          name: '企宽及时率报表(市-区县)',
          url: '/api/import/manage/gz_companyRate',
          fileList: [],
          status: '未上传',
          desc: '企宽及时率',
          uploadIsOk: false,
          rule: 'xx企宽及时率xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 4,
          name: '企宽满意度报表(市-区县)',
          url: '/api/import/manage/gz_companySatisfied',
          fileList: [],
          status: '未上传',
          desc: '企宽满意度',
          uploadIsOk: false,
          rule: 'xx企宽满意度xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 5,
          name: '全专业业务量',
          url: '/api/import/manage/gz_business',
          fileList: [],
          status: '未上传',
          desc: '全专业业务量',
          uploadIsOk: false,
          rule: 'xx全专业业务量xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 6,
          name: '重要专线故障日报汇总',
          url: '/api/import/manage/gz_majorLine',
          fileList: [],
          status: '未上传',
          desc: '重要专线故障日报',
          uploadIsOk: false,
          rule: 'xx重要专线故障日报xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 7,
          name: '融合团队通讯录名单',
          url: '/api/import/manage/gz_group',
          fileList: [],
          status: '未上传',
          desc: '融合团队通讯录',
          uploadIsOk: false,
          rule: 'xx融合团队通讯录xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 8,
          name: '运行中故障工单',
          url: '/api/import/manage/gz_ing_emos',
          fileList: [],
          status: '未上传',
          desc: '运行中故障',
          uploadIsOk: false,
          rule: 'xx运行中故障xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 9,
          name: '运行中投诉工单',
          url: '/api/import/manage/gz_ing_complain',
          fileList: [],
          status: '未上传',
          desc: '运行中投诉',
          uploadIsOk: false,
          rule: 'xx运行中投诉xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        }
      ]
    },

    readDetail() {
      this.readDetailInfo = true
    },
    callback() {},
    handleCancelExport() {
      this.daochuIs = false
      this.readDetailInfo = false
    },
    //数据导出u
    daochu() {
      this.analisyType == true ? this.downloadGz() : ''
      this.analisyTypea == true ? this.downloadTs() : ''
      this.analisyTypeb == true ? this.downloadMyd() : ''
    },
    comeBack() {
      this.isShow = true
      this.initdataKAITONG()
    },
    daocru() {
      this.isShow = false
    }
  }
}
// 企宽清单
const columnstableThree = [
  {
    title: '订单流水号', //Excel清单名称
    dataIndex: 'name',
    key: 'name',
    width: 100,
    align: 'center'
  },

  {
    title: '宽带归属地市', //Excel清单名称
    dataIndex: 'name1',
    key: 'name1',
    width: 100,
    align: 'center'
  },
  {
    title: '宽带归属县市', //Excel清单名称
    dataIndex: 'name2',
    key: 'name2',
    width: 100,
    align: 'center'
  },
  {
    title: '订单类型', //Excel清单名称
    dataIndex: 'name3',
    key: 'name3',
    width: 100,
    align: 'center'
  },
  {
    title: '处理结果', //Excel清单名称
    dataIndex: 'name4',
    key: 'name4',
    width: 100,
    align: 'center'
  },
  {
    title: '订单内容', //Excel清单名称
    dataIndex: 'name5',
    key: 'name5',
    width: 100,
    align: 'center'
  },
  {
    title: '回访满意', //Excel清单名称
    dataIndex: 'name6',
    key: 'name6',
    width: 100,
    align: 'center'
  },
  {
    title: '工单历时(刚性)', //Excel清单名称
    dataIndex: 'name7',
    key: 'name7',
    width: 100,
    align: 'center'
  },
  {
    title: '是否及时(刚性)', //Excel清单名称
    dataIndex: 'name8',
    key: 'name8',
    width: 100,
    align: 'center'
  }
]
const columnstableKAITONG = [
  {
    title: '报表类型', //Excel清单名称
    dataIndex: 'name',
    key: 'name',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '命名规则',
    dataIndex: 'rule',
    key: 'rule',
    width: 50,
    align: 'center'
  },
  {
    title: '上传操作',
    dataIndex: 'file',
    key: 'file',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'file' }
  },
  {
    title: '上传结果',
    dataIndex: 'status',
    key: 'status',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '模板下载',
    dataIndex: 'template',
    key: 'template',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'template' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 50,
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

const columnstable = []
const columnstableERJI = []
// 投诉
const columnstableFirstNext = [
  {
    title: '工单流水',
    dataIndex: 'workNo',
    align: 'center'
  },
  {
    title: '投诉城市',
    dataIndex: 'complaintCity',
    align: 'center'
  },
  {
    title: '故障县市',
    dataIndex: 'failureCounty',
    align: 'center'
  },

  {
    title: '集团名称',
    dataIndex: 'companyName',
    align: 'center'
  },

  {
    title: '是否超时',
    dataIndex: 'overtimeIs',
    align: 'center'
  },

  {
    title: '投诉类型一',
    dataIndex: 'complaintType1',
    align: 'center'
  },
  {
    title: '集团编号',
    dataIndex: 'companyNo',
    align: 'center'
  },
  {
    title: '处理历时',
    dataIndex: 'handleLong',
    align: 'center'
  }
]
// 故障表头
const columnstableFirst = [
  {
    title: '工单流水号',
    dataIndex: 'workNo',
    align: 'center'
  },
  {
    title: '工单主题',
    dataIndex: 'workSub',
    align: 'center'
  },
  {
    title: '故障地市',
    dataIndex: 'failureCity',
    align: 'center'
  },
  {
    title: '故障县市',
    dataIndex: 'failureCountry',
    align: 'center'
  },
  {
    title: '维护单位',
    dataIndex: 'repairCompany',
    align: 'center'
  },
  {
    title: '网元名称',
    dataIndex: 'wyName',
    align: 'center'
  },
  {
    title: '归档满意度',
    dataIndex: 'overSatisfaction',
    align: 'center'
  },
  {
    title: '是否重客',
    dataIndex: 'customerMajorIs',
    align: 'center'
  },
  {
    title: '客户名称',
    dataIndex: 'customerName',
    align: 'center'
  },
  {
    title: '是否超时',
    dataIndex: 'faultLongIs',
    align: 'center'
  },
  {
    title: '故障历时(分钟)',
    dataIndex: 'faultLong',
    align: 'center'
  },
  {
    title: '故障原因类别',
    dataIndex: 'failureReasonType',
    align: 'center'
  },
  {
    title: '业务影响说明',
    dataIndex: 'businessExplain',
    align: 'center'
  },
  {
    title: '集客产品ID',
    dataIndex: 'companyProjectId',
    with: 100,
    ellipsis: true,
    align: 'center'
  }
]
//满意度表头
const columnstableSecond = [
  {
    title: '工单流水',
    dataIndex: 'workNo',
    align: 'center'
  },
  {
    title: '投诉城市',
    dataIndex: 'complaintCity',
    align: 'center'
  },
  {
    title: '故障县市',
    dataIndex: 'failureCounty',
    align: 'center'
  },

  {
    title: '集团名称',
    dataIndex: 'companyName',
    align: 'center'
  },

  {
    title: '最终满意度',
    dataIndex: 'satisfiedIs',
    align: 'center'
  },
  {
    title: '投诉类型一',
    dataIndex: 'complaintType1',
    align: 'center'
  },
  {
    title: '集团编号',
    dataIndex: 'companyNo',
    align: 'center'
  }
]
</script>
